/** 查看页面 */
<template>
  <div v-loading="loading" class="view-page p-10px">
    <div class="mb-10px p-6px form-search">
      <jg-form-search
        ref="formSearch"
        :data="form.model"
        :items="form.items"
        :form-config="{
          labelWidth: 120,
          labelPosition: 'left'
        }"
        layout="grid"
        collapse-button
        responsive
        @search="search"
        @reset="search"
      />
    </div>
    <div>
      <jg-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvent" />
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { reactive, ref } from 'vue'
import type { VxeGridInstance } from 'vxe-table'
import { getDenmandViewList } from '@/api/demand'

declare var JgCheckbox: any
const loading = ref(false)
const xGrid = ref({} as VxeGridInstance)
const form = reactive({
  model: {
    dataSource: '1',
    factNo: 'A155',
    versionNo: '20230609'
  },
  items: [
    {
      prop: 'dataSource',
      label: '数据来源',
      component: 'Jg-select',
      attrs: {
        options: [
          { label: '手工维护', value: '1' },
          { label: '接入数据', value: '2' }
        ]
      }
    },
    {
      prop: 'factNo',
      label: '工厂',
      required: true,
      component: 'JgInput',
      attrs: {
        selectPopParam: {
          selectParam: { selectCode: 'SAP_T001W_NEW', selectProp: 'FACT_NO' }
        }
      }
    },
    {
      prop: 'versionNo',
      label: '版本',
      required: true,
      component: 'JgInput',
      attrs: {
        selectPopParam: {
          selectParam: { selectCode: 'INDEPENDENT_DEMAND_VERSION_NO', selectProp: 'VERSION_NO' }
        }
      }
    },
    {
      prop: 'dataStatus',
      label: '数据状态',
      component: 'Jg-select',
      attrs: {
        options: [
          { label: '待发布', value: '1' },
          { label: '待审核', value: '2' },
          { label: '待分配', value: '4' },
          { label: '已审核', value: '3' }
        ],
        clearable: true,
        placeholder: '请选择处理状态'
      }
    },
    {
      prop: 'date',
      label: '日期',
      component: 'el-date-picker',
      attrs: {
        valueFormat: 'YYYY-MM-DD',
        type: 'date',
        placeholder: '请选择日期'
      }
    }
  ]
})
const formData = ref()

let loadColumn = false
const selectList = ref(['1', '2'])
const typeOptions = [
  { label: '手工批导', value: '1' },
  { label: '接入数据', value: '2' }
]
// 列表配置项
const gridOptions = reactive({
  keepSource: true,
  size: 'small',
  height: 600,
  rowStyle({ row }) {
    return row.background
  },
  columnConfig: {
    minWidth: 80,
    resizable: true
  },
  rowConfig: {
    isHover: true
  },

  pagerConfig: {
    pageSize: 10,
    pageSizes: [5, 10, 15, 30, 100]
  },

  toolbarConfig: {
    buttons: [{ code: 'exportExcel', name: '导出', status: 'primary' }],
    refresh: false, // 显示刷新按钮
    zoom: true, // 显示全屏按钮
    custom: true // 显示自定义列按钮
  },
  proxyConfig: {
    seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
    sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
    filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
    form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
    autoLoad: false,

    props: {
      // 对应响应结果 Promise<{ result: [], page: { total: 100 } }>
      result: 'result', // 配置响应结果列表字段
      total: 'page.total' // 配置响应结果总页数字段
    },
    // 只接收Promise，具体实现自由发挥
    ajax: {
      // 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
      query: ({ page, sorts, filters, form, data }) => {
        console.log(11111, page, sorts, filters, form, data)
        const queryParams: any = Object.assign({}, form, formData.value, page)
        console.log(222, queryParams)
        // 处理排序条件
        // const firstSort = sorts[0]
        // if (firstSort) {
        //   queryParams.sort = firstSort.field
        //   queryParams.order = firstSort.order
        // }
        // 处理筛选条件
        // filters.forEach(({ field, values }) => {
        //   queryParams[field] = values.join(',')
        // })
        queryParams.pageNum = queryParams.currentPage
        return getDenmandViewList(queryParams).then((response) => {
          return {
            result: response.data.list,
            page: {
              total: response.data.total
            }
          }
        })
      }
    }
  },
  columns: [
    { type: 'checkbox', title: '', width: 60, fixed: 'left' },
    {
      field: 'factNo',
      title: '工厂'
    },

    {
      field: 'planSortRule',
      title: '计划排序规则'
    },
    {
      field: 'typeNo',
      title: '类别'
    },
    {
      field: 'matNo',
      title: '物料'
    },
    {
      field: 'matDesc',
      title: '物料描述'
    },
    {
      field: 'matVersion',
      title: '物料版本'
    },
    {
      field: 'beskz',
      title: '采购类型'
    },
    {
      field: 'prodVersion',
      title: '生产版本'
    },
    {
      field: 'optionBomNo',
      title: '可选BOM号'
    },
    {
      field: 'unit',
      title: '单位'
    },
    {
      field: 'dataSource',
      title: '数据来源'
    },
    {
      field: 'inputFactNo',
      title: '需求工厂'
    },
    {
      field: 'dataStatus',
      title: '数据状态'
    },
    {
      field: 'custName',
      title: '客户名称'
    },
    {
      field: 'projectNo',
      title: '项目'
    },
    {
      field: 'projectNoName',
      title: '项目名称'
    },

    {
      field: 'parmatNo',
      title: '上阶物料'
    },
    {
      field: 'warehouse',
      title: '仓库组'
    },
    {
      field: 'expireDemandNum',
      title: '过期需求'
    }
  ],
  exportConfig: {
    modes: ['current', 'selected']
  },
  checkboxConfig: {
    reserve: true,
    highlight: true,
    range: true
  }
})
// 列表事件
const gridEvent = {
  // 列表pagenation发生变化
  pageChange(val) {
    xGrid.value.commitProxy('query')
  },
  proxyQuery() {
    console.log('数据代理查询事件')
  },
  proxyDelete() {
    console.log('数据代理删除事件')
  },
  proxySave() {
    console.log('数据代理保存事件')
  },
  toolbarButtonClick({ code, $event }: any) {
    if (code === 'exportExcel') {
      if (!gridOptions?.proxyConfig?.props.total) return
      const checked = xGrid.value.getCheckboxRecords()
      loading.value = true
      if (checked.length) {
        // 只导出勾选的行
        xGrid.value
          .exportData({
            mode: 'selected'
          })
          .finally(() => {
            loading.value = false
          })
      } else {
        // 导出全部
        xGrid.value
          .exportData({
            mode: 'all'
          })
          .finally(() => {
            loading.value = false
          })
      }
    }
  }
}

const search = (data) => {
  console.log('form data:', data)
  if (!data) return
  formData.value = data
  xGrid.value.commitProxy('query', data)
}
</script>

<style lang="scss">
.theme-default-content {
  max-width: 100% !important;
}
.view-page {
  background: #fff;
  .form-search {
    position: relative;
    &::after {
      content: ' ';
      display: block;
      position: absolute;
      left: -10px;
      right: -10px;
      bottom: 0;
      height: 8px;
      padding: 0 10px;
      background: whitesmoke;
    }
  }
}
</style>
